<template>
	<view class="page" :style="{'height': Height}">
		<view class="block-one">
			<view class="head">
				张三—普通理科2020网报方案
			</view>
			<view class="body">
				<view class="p">
					<view class="text">姓名：张三</view>
					<view class="text">性别：男</view>
					<view class="text">民族：蒙古族</view>
				</view>
				<view class="p">
					<view class="text">裸分：528.0</view>
					<view class="text">投档分：528.0</view>
					<view class="text">加分：0.0/0.0</view>
				</view>
				<view class="p">
					<view class="text">语文：108.0</view>
					<view class="text">数学：98.5</view>
					<view class="text">英语：95.6</view>
				</view>
				<view class="p">
					<view class="text">帐号：001-01</view>
					<view class="text">科类：普通理科</view>
				</view>
				<view class="p">
					<view class="text">位次：5884至6800</view>
					<view class="text">同分人数：548</view>
				</view>
				<view class="p">
					<view class="text">综合：212.5</view>
					<view class="text">口语：10.0</view>
				</view>
			</view>
			<view class="foot">
				<view class="p" v-for="(item,index) in 3" :key="index">
					相同排名的 普通文科 考生在
					<text class="red"> 2019 年</text>
					的高考成绩为
					<text class="red"> 584分 </text>
					同分共有
					<text class="red">50人</text>
					<text class="ccc">(此为位次转分后的成绩)</text>
				</view>
			</view>
		</view>

		<view class="block-two">
			<!-- 搜索筛选 -->
			<view class="search-select">
				<view class="search">
					<view class="iconfont iconsearch"></view>
					<input class="input" type="text" value="" placeholder="请输入学校名称/专业" placeholder-class="placeholder" />
				</view>
				<view class="shaixuan-btn" @click.stop="shaixuanOpen">
					<image src="../../static/shaixuan-icon.png" mode=""></image>
					筛选
				</view>
			</view>
			<view class="select-wrap">
				<view class="select">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view style="width: 100rpx;" class="uni-input" v-if="index == -1">风险度</view>
						<view class="uni-input" v-else>{{array[index]}}</view>
					</picker>
					<view class="iconfont iconxxjtfull"></view>
				</view>
				<view class="select">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" v-if="index == -1">招生批次</view>
						<view class="uni-input" v-else>{{array[index]}}</view>
					</picker>
					<view class="iconfont iconxxjtfull"></view>
				</view>
				<view class="select">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" v-if="index == -1">所属地区</view>
						<view class="uni-input" v-else>{{array[index]}}</view>
					</picker>
					<view class="iconfont iconxxjtfull"></view>
				</view>
				<view class="select">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" v-if="index == -1">学校特性</view>
						<view class="uni-input" v-else>{{array[index]}}</view>
					</picker>
					<view class="iconfont iconxxjtfull"></view>
				</view>
			</view>
		</view>

		<!-- 表格 -->
		<view class="list-wrap" v-for="(item,index) in 2" :key="index">
			<view class="list-wrap">
				<view class="table-wrap">
					<view class="th">
						<view class="td">
							院校名称
						</view>
						<view class="td">
							专业名称
						</view>
						<view class="td">
							风险
						</view>
						<view class="td">
							报考批次人数
						</view>
						<view class="td">
							操作
						</view>
					</view>
					<view class="tr" v-for="(item,index) in 7" :key="index">
						<view class="td">
							北京大学
							<view class="tags">
								<view class="tag">
									211
								</view>
								<view class="tag">
									985
								</view>
							</view>
						</view>
						<view class="td">
							数字媒体艺术设计
							<view class="tags">
								<view class="tag">
									重点学科
								</view>
								<view class="tag">
									重点学科
								</view>
							</view>
						</view>
						<view class="td bg-1">
							冒险
						</view>
						<view class="td">
							第一批
						</view>
						<view class="td">
							<view class="btn" @click.stop="doDelete">
								删除
							</view>
							<view class="btn">
								恢复
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<uni-popup ref="popup" type="right">
			<view class="shaixuan-popup-right">
				<view class="row">
					<view class="title">
						专业特性
					</view>
					<view class="tags">
						<text>985工程</text>
						<text>211工程</text>
						<text>一流大学</text>
					</view>
				</view>
				<view class="row">
					<view class="title">
						门类
					</view>
					<view class="select">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input" v-if="index == -1">请选择考试阶段</view>
							<view class="uni-input" v-else>{{array[index]}}</view>
						</picker>
						<view class="iconfont iconxxjtfull"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">
						专业大类
					</view>
					<view class="select">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input" v-if="index == -1">请选择考试类型</view>
							<view class="uni-input" v-else>{{array[index]}}</view>
						</picker>
						<view class="iconfont iconxxjtfull"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">
						专业
					</view>
					<view class="select">
						<input type="digit" value="" placeholder="请填写专业" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="btn-wrap">
					<view class="reset-btn">
						重置
					</view>
					<view class="submit-btn">
						确定
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 查看全部 -->
		<view v-if="viewAllIsShow" class="view-all-wrap">
			<view class="view-all-btn" @click.stop="viewAll">
				查看全部
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="fiexd-foot-nav">
			<view class="lf">
				<image class="icon" src="../../static/dayin-icon.png" mode=""></image>
				打印
			</view>
			<view class="rt">
				<view class="warranty-btn">
					授权
				</view>
				<view class="new-set-btn">
					重新制作
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			let that = this;
			if (e.scrollTop > that.height) { //当距离大于10时显示回到顶部按钮
				that.viewAllIsShow = true;
			} else {
				that.viewAllIsShow = false;
			}
		},
		data() {
			return {
				viewAllIsShow: false, //是否显示全部
				Height: '1900rpx', //高度
				height: '100',
				index: -1,
				array: ['2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04'],
			}
		},
		methods: {
			doDelete(){
				uni.showModal({
				    title: '提示',
				    content: '确定删除？',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			shaixuanOpen() {
				this.$refs.popup.open()
			},
			//查看全部
			viewAll(){
				let that = this;
				that.Height = 'auto';
				that.viewAllIsShow = false;
				that.height = that.height + that.Height;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'baokaofanganC.scss';
	@import '../../common/icon/iconfont.css';
</style>
